<template>
  <div class="shangjia">
    <h2>商家成交金额统计</h2>
    <ul>
      <li>今日</li>
      <li>本周</li>
      <li>本月</li>
      <li>全年</li>
      <li>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{
            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        }
    }
};
</script>

<style scoped>

.shangjia{
    padding: 0 0 20px 0;
    margin: 40px  0 20px  6%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    align-items: center;
    box-sizing: border-box;
    width: 94%;
}
h2{
    width: 70%;
    font-size: 16px;
    height: 24px;
    line-height: 24px;
}
ul{
    display: flex;
    align-items: center;
    height: 40px;
}
li{
    margin-right: 30px;
    height: 40px;
    width: 50px;
    color: #aaa;
    font-size: 16px;
    line-height: 40px;
}
li:last-child{
    width: 400px;

}
.block{
    padding: 0;
    margin: 0;
    height: 40px;
}
.el-date-editor{
    margin: 0;
}
</style>